<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="600"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">

    <a-spin :spinning="confirmLoading">

      <a-form :form="form" v-if="designNameOption.length>0">
        <a-form-item label="">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :style="{ marginTop: '12px',height:'auto' }">
              <a-checkbox-group @change="designNameChange" v-model="designNameValue" style="width: 100%">
                <a-row>
                  <template v-for="(des) in designNameOption">
                    <a-col :span="6">
                      <a-checkbox :value="des.value">{{ des.text }}</a-checkbox>
                    </a-col>
                  </template>
                </a-row>
              </a-checkbox-group>
            </a-card>
          </a-col>
        </a-form-item>
      </a-form>
      <div v-else><h3>无可配置角色!</h3></div>
    </a-spin>
    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="checkALL">全部勾选</a-menu-item>
          <a-menu-item key="2" @click="cancelCheckALL">取消全选</a-menu-item>
        </a-menu>
        <a-button>
          操作
          <a-icon type="up" />
        </a-button>
      </a-dropdown>
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit(true)" type="primary">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import JEllipsis from '@/components/jeecg/JEllipsis'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'

export default {
  name: 'DeptRoleUserModal',
  components: {
    JEllipsis
  },
  data() {
    return {
      currentDeptId: '',
      title: '部门角色分配',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/sys/sysDepartRole/deptRoleUserAdd',
        getDeptRoleList: '/sys/sysDepartRole/getDeptRoleList',
        getDeptRoleByUserId: '/sys/sysDepartRole/getDeptRoleByUserId'
      },
      designNameOption: [],
      userId: '',
      newRoleId: '',
      oldRoleId: '',
      designNameValue: [],
      desformList: []
    }
  },
  created() {

  },
  methods: {
    add(record, departId) {
      this.userId = record.id
      this.currentDeptId = departId
      this.loadDesformList()
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      getAction(this.url.getDeptRoleByUserId, { userId: this.userId, departId: this.currentDeptId }).then((res) => {
        if (res.success) {
          var designName = []
          for (let value of res.result) {
            designName.push(value.droleId)
          }
          this.oldRoleId = designName.join(',')
          this.designNameValue = designName
          this.newRoleId = designName.join(',')
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleSubmit() {
      const that = this
      // 触发表单验证
      that.confirmLoading = true
      let httpurl = this.url.add
      let method = 'post'
      let formData = Object.assign(this.model, {})
      //时间格式化
      formData.userId = this.userId
      formData.newRoleId = this.newRoleId
      formData.oldRoleId = this.oldRoleId
      httpAction(httpurl, formData, method).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('reload')
          that.$emit('ok')
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
        that.close()
      })
    },
    handleCancel() {
      this.designNameOption = []
      this.designNameValue = []
      this.close()
    },
    designNameChange(selectedValue) {
      this.newRoleId = selectedValue.join(',')
    },
    checkALL() {
      var designName = []
      for (let value of this.desformList) {
        designName.push(
          value.id
        )
      }
      this.designNameValue = designName
      this.newRoleId = designName.join(',')
    },
    cancelCheckALL() {
      this.designNameValue = []
      this.newRoleId = ''
    },
    /** 加载desform */
    loadDesformList() {
      getAction(this.url.getDeptRoleList, { departId: this.currentDeptId, userId: this.userId }).then((res) => {
        if (res.success) {
          this.desformList = res.result
          var designName = []
          for (let value of this.desformList) {
            designName.push({
              value: value.id,
              text: value.roleName
            })
          }
          this.designNameOption = designName
        }
      })
    }
  }

}
</script>

<style scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>